<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九州古今 - 中小学中国地理历史助教</title>
    <link rel="stylesheet" href="src/css/styles.css">
    <link rel="stylesheet" href="src/css/background.css">
</head>
<body>
    <div class="background-container"></div>
    <!-- API Key 设置页面 -->
    <div id="api-key-container" class="api-key-container">
        <div class="api-key-form">
            <h2>欢迎使用九州古今助教系统</h2>
            <p style="text-align: center; margin-bottom: 20px;">请先输入您的 ModelScope API 密钥以继续</p>
            
            <div class="form-group">
                <label for="api-key">API 密钥:</label>
                <input type="password" id="api-key" placeholder="请输入您的 API 密钥" required>
            </div>
            
            <button id="submit-api-key" class="btn">进入助教系统</button>
            
            <div class="info-text">
                没有 API 密钥？<a href="https://www.modelscope.cn/my/myaccesstoken" target="_blank">点击这里获取访问令牌</a>
            </div>
        </div>
    </div>

    <!-- 主聊天界面 -->
    <div id="chat-container" class="chat-container">
        <div class="chat-header">
            <h1>九州古今</h1>
            <div class="api-key-info" id="api-key-display">已登录</div>
        </div>

        <!-- 新增：顶层主题导航 -->
        <nav class="top-tabs" role="tablist" aria-label="主题导航">
            <button class="nav-tab active" data-page="landscapes" aria-selected="true">⛰️ 山河壮阔</button>
            <button class="nav-tab" data-page="stories" aria-selected="false">📜 古今逸闻</button>
            <button class="nav-tab" data-page="figures" aria-selected="false">🧭 传奇人物</button>
            <button class="nav-tab" data-page="today" aria-selected="false">🗓️ 历史上的今天</button>
        </nav>

        <!-- 面板：山河壮阔 -->
        <section class="page-panel active" data-page="landscapes">
            <div class="page-hero">
                点燃对神州山河的兴趣：从地形、气候到风景名胜，用图片认识中国。
            </div>
            <div class="suggestion-cards">
                <div class="suggestion-card" data-suggestion="请用适合中小学生的语言，讲解中国地形的“三级阶梯”，各阶梯代表地区、海拔与典型景观。">中国地形“三级阶梯”</div>
                <div class="suggestion-card" data-suggestion="比较东部季风区与西北干旱区与青藏高寒区：气候、植被、河流的差异及成因。">三大自然区对比</div>
                <div class="suggestion-card" data-suggestion="选择一个省，概述其地理位置、地形气候、代表性风景与特产，并给出易混淆知识点。">省域地理速览</div>
                <div class="suggestion-card" data-suggestion="给我一份“看图说地理”训练：提供一张地形或气候图的观察要点与答题步骤。">看图说地理训练</div>
            </div>
            <!-- 新增：图片生成区域 -->
            <div class="generation-area">
                <button id="generate-landscape-btn" class="action-btn">🎨 生成一幅山河画卷</button>
                <p class="generation-desc">点击按钮，AI将为您随机创作一幅中国山水主题的画作。</p>
            </div>

            <!-- 内嵌的CSS样式 -->
            <style>
            .generation-area {
                margin-top: 20px;
                padding: 15px;
                background-color: rgba(255, 255, 255, 0.05);
                border-radius: 8px;
                text-align: center;
            }

            .action-btn {
                background-color: #4a90e2;
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 20px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s, transform 0.2s;
                font-weight: bold;
            }

            .action-btn:hover {
                background-color: #357abd;
                transform: translateY(-2px);
            }

            .generation-desc {
                font-size: 12px;
                color: #888;
                margin-top: 10px;
            }
            </style>
        </section>

        <!-- 面板：古今逸闻 -->
        <section class="page-panel" data-page="stories">
            <div class="page-hero">
                历史上的奇闻轶事：用轻松有趣的方式讲述离奇瞬间与名人逸事，既涨知识又好玩。
            </div>
            <div class="suggestion-cards">
                <div class="suggestion-card" data-suggestion="用悬疑短篇方式讲述一桩历史奇案（自定朝代），按‘背景—疑点—推理—反转—启示’结构，适合中小学生，避免血腥。">离奇案件小剧场</div>
                <div class="suggestion-card" data-suggestion="挑选一位历史名人，讲3条鲜为人知的趣闻，每条含时间、地点、人物、趣味点，并给出可信来源或考据提示。">名人逸事也有梗</div>
                <div class="suggestion-card" data-suggestion="设计5道“历史冷知识”趣味问答（单选），给出正确答案与一句解释，并标注相关地区或城市。">古代冷知识问答</div>
                <div class="suggestion-card" data-suggestion="讲一个被误传为“神迹”的自然现象（如日食、海市蜃楼），用通俗科学解释成因，并交代当时背景与影响。">自然异象与误会</div>
            </div>
        </section>

        <!-- 面板：传奇人物 -->
        <section class="page-panel" data-page="figures">
            <div class="page-hero">
                认识历史人物：用“生平线索—关键事件—地理关联—影响评价”的四格卡片方式理解人物。
            </div>
            <div class="suggestion-cards">
                <div class="suggestion-card" data-suggestion="用“四格卡片”介绍一位历史人物：生平线索、关键事件、与地理关联、影响与评价（适合中小学生）。">人物四格卡片</div>
                <div class="suggestion-card" data-suggestion="比较两位历史人物的相同点与不同点，并说明与时代背景和地理环境的关系。">人物对比分析</div>
                <div class="suggestion-card" data-suggestion="讲述一位与中国地理大发现、交通或工程相关的历史人物及其贡献。">人物与工程/交通</div>
                <div class="suggestion-card" data-suggestion="给我一份人物小传模板，适合课堂速记与复习使用。">人物小传模板</div>
            </div>

            <!-- 精选人物实例（重写为：汉文帝、孔子、王阳明） -->
            <div class="figure-cards">
                <div class="figure-card" data-name="汉文帝" data-era="西汉" data-focus="文景之治, 轻徭薄赋, 黄老思想">
                    <img src="src/assets/hanwendi.png" alt="汉文帝" onerror="this.onerror=null;this.style.display='none';">
                    <div class="figure-body">
                        <div class="figure-title">汉文帝</div>
                        <p class="figure-brief">西汉皇帝，推行与民休息，开创“文景之治”。</p>
                    </div>
                </div>
                <div class="figure-card" data-name="孔子" data-era="春秋" data-focus="儒家, 教育, 礼乐制度">
                    <img src="src/assets/kongzi.png" alt="孔子" onerror="this.onerror=null;this.style.display='none';">
                    <div class="figure-body">
                        <div class="figure-title">孔子</div>
                        <p class="figure-brief">儒家学派创始人，倡导仁礼，重视教育与教化。</p>
                    </div>
                </div>
                <div class="figure-card" data-name="王阳明" data-era="明代" data-focus="心学, 知行合一, 龙场悟道, 平定宁王之乱">
                    <img src="src/assets/wangyangming.png" alt="王阳明" onerror="this.onerror=null;this.style.display='none';">
                    <div class="figure-body">
                        <div class="figure-title">王阳明</div>
                        <p class="figure-brief">明代理学家，心学代表人物，主张“知行合一”。</p>
                    </div>
                </div>
                <div class="figure-card" data-name="徐霞客" data-era="明代" data-focus="地理, 游记, 探险, 徐霞客游记">
                    <img src="src\assets\xuxiake.png" alt="徐霞客" onerror="this.onerror=null;this.style.display='none';">
                    <div class="figure-body">
                        <div class="figure-title">徐霞客</div>
                        <p class="figure-brief">明代地理学家、旅行家，以《徐霞客游记》闻名。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 面板：历史上的今天（组合型） -->
        <section class="page-panel" data-page="today">
            <div class="page-hero">
                历史上的今天：组合“山河壮阔+古今逸闻+传奇人物”，快速了解今天与历史的连接。
            </div>
            <div class="today-actions">
                <button id="generate-today-btn" class="btn primary">一键生成“历史上的今天”提示</button>
                <small class="hint">将自动生成适龄提示词，你可直接发送或自行修改。</small>
            </div>
            <div class="suggestion-cards">
                <div class="suggestion-card" data-suggestion="以今天日期为主题，组合说明：1）一处相关自然地理或景观；2）一件历史事件（时间线+地点）；3）一位相关人物（四格卡片）。要求语言简洁、适合中小学生。">示例：组合型讲解</div>
            </div>
        </section>

        <!-- 聊天消息区 -->
        <div class="chat-messages" id="chat-messages"></div>


        <!-- 输入区 -->
        <div class="typing-indicator" id="typing-indicator" style="display: none;">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        
        <div class="chat-input">
            <div class="input-area">
                <textarea id="text-input" class="text-input" placeholder="输入你的问题或描述..." rows="1"></textarea>
                <input type="file" id="file-input" class="file-input" accept="image/*">
                <button id="upload-btn" class="upload-btn">上传图片</button>
            </div>
            <button id="send-btn" class="send-btn">发送</button>
        </div>
    </div>

    <script src="src/js/app.js"></script>
    <script src="src/js/marked.min.js"></script>

</body>
</html>